<template>
  <div class="dv-main">
    <div class="tit">
      <span>历史人员统计</span>
      <p></p>
    </div>
    <div class="div-ul">

        <div id="chart_example" style="height: 100%; width: 100%"></div>

    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  components: {},
  mounted() {
    let myChart = echarts.init(document.getElementById("chart_example"));
    let myColor = [
      "#45d3fd",
      "#45d3fd",
      "#11da01",
      "#118b43",
      "#c3eb18",
      "#dfde14",
      "#eac736",
      "#ed5501",
      "#9d0700",
      "#e80c00",
    ];

    let option = {
      grid: {
        top: 15,
        left: 15,
        right: 15,
        bottom: 15,
        containLabel: true, //轴上的数值
      },
      legend: {
        icon: "rectangle",
        data: ["员工", "访客"],
        textStyle: {
          color: "#ffffff",
        },
        right: 10,
        top: 5,
        itemWidth: 10,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        splitLine: false,
        boundaryGap: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: myColor[0],
          },
        },
        axisTick: {
          lineStyle: {
            color: myColor[0],
          },
        },
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Mon",
          "Tue",
          "Wed",
        ],
      },
      yAxis: {
        type: "value",
        min: 0,
        splitLine: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: myColor[0],
          },
        },
        axisTick: {
          show: true,
        },
      },
      visualMap: {
        show: false,
        calculable: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          label: {
            textStyle: {
              color: "white",
            },
          },
        },
      },
      series: [
        {
          name: "员工",
          type: "line",
          smooth: 0.1,
          symbolSize: 5,
          hoverAnimation: true,
          lineStyle: {
            normal: {
              width: 1,
            },
          },
          itemStyle: {
            normal: {
              // 拐点上显示数值
              label: {
                show: true,
              },
              borderColor: "#45d3fd", // 拐点边框颜色
              lineStyle: {
                // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                color: "#45d3fd",
              },
            },
          },
          data: [96, 86, 103, 132, 89, 96, 201, 156, 107, 153],
        },
        {
          name: "访客",
          type: "line",
          smooth: 0.1,
          symbolSize: 5,
          hoverAnimation: true,
          lineStyle: {
            normal: {
              width: 1,
            },
          },
          itemStyle: {
            normal: {
              // 拐点上显示数值
              label: {
                show: true,
              },
              borderColor: "red", // 拐点边框颜色
              lineStyle: {
                // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                color: "#ed5501",
              },
            },
          },
          data: [54, 36, 46, 45, 73, 65, 89, 73, 56, 38],
        },
      ],
    };

    myChart.setOption(option);

    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  },
};
</script>

<style scoped>
.dv-main {
  height: 100%;
  width: 100%;
  display: block;
  color: #daf9ff;
  padding: 10px 10px;
  border-radius: 5px;
  background-color: rgba(72, 80, 93, 0.3);
}

.tit {
  display: flex;
  align-items: flex-end;
  height: 37px;
}

.tit span {
  background: url("../../assets/img/line1.png") no-repeat bottom right;
  font-size: 20px;
  white-space: nowrap;
  padding-bottom: 10px;
  padding-right: 20px;
}

.tit p {
  background: url("../../assets/img/line2.png") no-repeat bottom right;
  width: 100%;
  height: 13px;
  margin-bottom: 5px;
  opacity: 0.5;
}

.div-ul {
  height: calc(100% - 37px);
  padding: 0px;
  display: block;
}
</style>
